<template>
	<view class="addDeviceLayOut">
		<view class="title">
			{{$t('addDeviceImei.title')}}
		</view>
		<view class="inputBg">
			<input class="filed" :value="imei" placeholder-style="color:#666" :placeholder="$t('addDeviceImei.placeHolder')" @input="inputeContent" />
			<view class="scan" @click="toScanCode">
				<image src="../../static/device/scanCode.png" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="register" @click="toRegisterDevice">
		{{$t('addDeviceImei.confirm')}}
		</view>
	</view>
</template>

<script setup>
	import { apiBindDevice } from '../../api/device_api';
	import { ref } from 'vue';
	import { i18nTool } from '../../utils/i18en';
	import{ onLoad } from "@dcloudio/uni-app";
	
	onLoad(()=>{
		uni.setNavigationBarTitle({
			title:i18nTool("addDeviceImei.navTitle")
		})
	})
	const imei = ref(null);
	const inputeContent=(v)=>{
		imei.value = v.detail.value;
	}
	function toScanCode(){
		uni.scanCode({
			onlyFromCamera:false,
			scanType:['barCode','qrCode','datamatrix','pdf417'],
			autoDecodeCharset:true,
			autoZoom:true,
			barCodeInput:true,
			success(res) {
				console.log("ssssscscs",res);
				imei.value = res.result;
			},
			fail(err) {
				
			}
			
		})
	}
	
	const toRegisterDevice = async()=>{
		if(imei.value == null){
			uni.showToast({
				icon:'none',
				title:i18nTool('addDeviceImei.title'),
			})
			return;
		}
		const param = {
			imei:imei.value
		}
		let res = await apiBindDevice(param);
		let data = {
			suc:true,
			imei:imei.value
		}
		uni.$emit("stepOne", data);
		if(res.content.subscribed == 1){
			uni.$emit("stepTwo", true);
		}
		uni.navigateBack();
		
	}
</script>

<style lang="scss" scoped>
	.addDeviceLayOut {
		.title{
			font-size: 30rpx;
			color: #333;
			margin:40rpx 40rpx;
		}
		.inputBg {
			margin: 40rpx 40rpx;
			border: 2rpx solid #BDBDBD;
			border-radius: 10rpx;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			.filed {
				height: 100%;
				width: 70%;
				padding-left: 20rpx;
				padding-right: 15rpx;
				color: #333;
				font-size: 34rpx;
			}
			.scan{
				width: 44rpx;
				height: 44rpx;
				margin-right: 20rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.register{
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-top: 100rpx;
			height: 80rpx;
			color: #fff;
			background-color: #53786C;
			border-radius: 40rpx;
			@include flex-box-set(center);
		
		}
	}
</style>